<template>
  <view class="container">
    <button @click="fetchAndAddContent">添加异步内容</button>

    <view ref="scrollContainer" class="scroll-container">
      <view class="content-item" v-for="(item, index) in contentList" :key="index">
        {{ item.text }}
        <!-- 动态高度元素（如图片） -->
        <image v-if="item.hasImage" :src="item.imgUrl" mode="widthFix" class="content-img" @load="onImageLoad" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        contentList: []
      };
    },
    methods: {
      // 模拟接口请求获取内容
      fetchAndAddContent() {
        // 模拟异步请求
        setTimeout(() => {
          const newContent = {
            text: `异步内容 ${Date.now().toString().slice(-4)}`,
            hasImage: Math.random() > 0.5, // 随机显示图片
            imgUrl: 'https://picsum.photos/300/200?random=' + Math.random()
          };
          this.contentList.push(newContent);

          // 初始渲染后滚动（图片可能还没加载完）
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        }, 800);
      },

      // 图片加载完成后再次滚动（确保动态高度生效）
      onImageLoad() {
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      },

      // 复用滚动到底部的方法（同基础版本）
      scrollToBottom() {
        const container = this.$refs.scrollContainer;
        if (!container) return;

        uni.createSelectorQuery()
          .in(this)
          .select('.scroll-container')
          .boundingClientRect()
          .selectAll('.content-item')
          .boundingClientRect()
          .exec((res) => {
            if (!res || res.length < 2) return;

            const containerRect = res[0];
            const contentRects = res[1];
            if (contentRects.length === 0) return;

            const lastItemBottom = contentRects[contentRects.length - 1].bottom;
            const containerTop = containerRect.top;
            const scrollDistance = lastItemBottom - containerTop - containerRect.height;

            container.scrollTop = scrollDistance;
          });
      }
    }
  };
</script>

<style>
  /* 样式同基础版本，新增图片样式 */
  .content-img {
    width: 100%;
    margin-top: 10rpx;
  }
</style>